<template>
  <div v-if='visible' class="co-toast">
    {{message}}
  </div>
</template>

<script>

export default {
  name: 'co-toast',
  data () {
    return {
      visible: true,
      duration: 3000
    }
  },
  methods: {
    hideToast () {
      this.visible = false
    }
  },
  mounted () {
    setTimeout(() => {
      this.hideToast()
    }, this.duration)
  }
}
</script>

<style scoped lang=scss>
  *{
    margin: 0px;
    padding: 0px;
  }
  .co-toast{
    display: inline-block;
    font-size: 23px;
    padding: 22px 40px;
    box-sizing: border-box;
    color: #fff;
    background-color: #626262;
    border-radius: 40px;
    position: absolute;
    top: 90%;
    left: 50%;
    z-index: 999;
    transform: translate(-50% ,-50%);
    opacity: 0.9;
  }
</style>
